<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/home.css">
  <title>云能</title>
</head>

<body>
  <div class="wrap">
    <div class="content">
      <div class="box">
        <div class="box-header">
          <div class="header-title">通知公告</div>
          <span class="more-btn"></span>
        </div>
        <div class="box-body">
          <div class="notice">
            <div class="notice-left">
              <div class="swiper-wrap">
                <div class="swiper-slide">
                  <img src="imgs/banner-img.png" alt="">
                </div>
              </div>
            </div>
            <div class="notice-right">
              <div class="notice-title">
                中共中央办公厅印发《关于中央企业在完善公司治理中加强党的领导的意见》
              </div>
              <div class="notice-desc">
                近日，中共中央办公厅印发了《关于中央企业在完善公司治理中加强党的领导的意见》（以下简称《意见》），并发出通知，要求各地区各部门
              </div>
              <ul class="list red-style">
                <li>
                  <span class="list-text">奋斗百年路 启航新征程 | 做永不褪色的忠诚卫士</span>
                  <span class="time">2021-06-29</span>
                </li>
                <li>
                  <span class="list-text">奋斗百年路 启航新征程 | 做永不褪色的忠诚卫士</span>
                  <span class="time">2021-06-29</span>
                </li>
                <li>
                  <span class="list-text">奋斗百年路 启航新征程 | 做永不褪色的忠诚卫士</span>
                  <span class="time">2021-06-29</span>
                </li>
                <li>
                  <span class="list-text">奋斗百年路 启航新征程 | 做永不褪色的忠诚卫士</span>
                  <span class="time">2021-06-29</span>
                </li>
                <li>
                  <span class="list-text">奋斗百年路 启航新征程 | 做永不褪色的忠诚卫士</span>
                  <span class="time">2021-06-29</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="box">
        <div class="box-header">
          <div class="header-title">通知公告</div>
          <span class="more-btn"></span>
        </div>
        <div class="box-body">
          <table class="table">
            <thead>
              <tr>
                <th>待办名称</th>
                <th>发文部门</th>
                <th>待办环节</th>
                <th>时间</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>待办名称待办名称待办名称待办名称</td>
                <td class="gray-text">办公室</td>
                <td class="gray-text">
                  办公室审批
                </td>
                <td class="lightgray-text">
                  2021-05-19
                </td>
              </tr>
              <tr>
                <td>待办名称待办名称待办名称待办名称</td>
                <td class="gray-text">办公室</td>
                <td class="gray-text">
                  办公室审批
                </td>
                <td class="lightgray-text">
                  2021-05-19
                </td>
              </tr>
              <tr>
                <td>待办名称待办名称待办名称待办名称</td>
                <td class="gray-text">办公室</td>
                <td class="gray-text">
                  办公室审批
                </td>
                <td class="lightgray-text">
                  2021-05-19
                </td>
              </tr>
              <tr>
                <td>待办名称待办名称待办名称待办名称</td>
                <td class="gray-text">办公室</td>
                <td class="gray-text">
                  办公室审批
                </td>
                <td class="lightgray-text">
                  2021-05-19
                </td>
              </tr>
              <tr>
                <td>待办名称待办名称待办名称待办名称</td>
                <td class="gray-text">办公室</td>
                <td class="gray-text">
                  办公室审批
                </td>
                <td class="lightgray-text">
                  2021-05-19
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 图表 -->
      <div class="box">
        <div class="box-body">
          <ul class="tab-nav clearfix">
            <li class="ztqk active">总体情况</li>
            <li class="tjfx">统计分析</li>
          </ul>

          <div class="charts clearfix">
            <div class="charts-left">
              <div class="chart" id="mapChart" style="width:100%;height:300px;"></div>
            </div>
            <div class="charts-right">
              <div class="chart" id="jztChart" style="width:100%;height:300px;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="aside">
      <div class="card dzfj">
        <div class='card-header'>
          <span>电子书籍</span>
          <span class="more-btn"></span>
        </div>
        <div class="card-body">
          <dl class="clearfix">
            <dt>
              <img src="imgs/book-img.png" alt="">
            </dt>
            <dd>
              <div class='book-name'>我有一个梦想：全国优秀共产党员张桂梅的故事</div>
              <div class="book-author">作者：张桂梅</div>
              <button class="view-btn">查看书籍</button>
              
            </dd>
          </dl>
          <ul class="list blue-style">
            <li>《中国近代银行业》</li>
            <li>《灵活就业：数字经济潮下的人与》</li>
            <li>《基层中国》</li>
            <li>《灵活就业：数字经济潮下的人与》</li>
          </ul>
        </div>
      </div>
      <div class="card nbzd">
        <div class='card-header'>
          <span>内部制度文件</span>
          <span class="more-btn"></span>
        </div>
        <div class="card-body">
          <ul class="list pdf-style">
            <li>《中国近代银行业》</li>
            <li>《灵活就业：数字经济潮下的人与》</li>
            <li>《基层中国》</li>
            <li>《灵活就业：数字经济潮下的人与》</li>
          </ul>
        </div>
      </div>
      <div class="card pxxx">
        <div class='card-header'>
          <span>培训学习</span>
          <span class="more-btn"></span>
        </div>
        <div class="card-body">
          <ul class="list pdf-style">
            <li>《中国近代银行业》</li>
            <li>《灵活就业：数字经济潮下的人与》</li>
            <li>《基层中国》</li>
            <li>《灵活就业：数字经济潮下的人与》</li>
          </ul>
        </div>
      </div>
      <div class="card jjgz">
        <div class='card-header'>
          <span>纪检工作精神文件合集</span>
          <span class="more-btn"></span>
        </div>
        <div class="card-body">
          <ul class="list pdf-style">
            <li>《中国近代银行业》</li>
            <li>《灵活就业：数字经济潮下的人与》</li>
            <li>《基层中国》</li>
            <li>《灵活就业：数字经济潮下的人与》</li>
          </ul>
        </div>
      </div>

      <div class="card jjgz">
        <div class='card-header'>
          <span>纪检工作精神文件合集</span>
          <span class="more-btn"></span>
        </div>
        <div class="card-body">
          <ul class="list pdf-style">
            <li>《中国近代银行业》</li>
            <li>《灵活就业：数字经济潮下的人与》</li>
            <li>《基层中国》</li>
            <li>《灵活就业：数字经济潮下的人与》</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/echarts.js"></script>
  <script>
    $(function() {
      $('.tab-nav li').on('click', function() {
        $(this).addClass('active').siblings().removeClass('active')
      })
    })
  </script>
</body>

</html>